<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>db</title>

    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>


<div class="container container-fluid" style="margin: 5px auto;" id="dbApp">


    <!--查询button start-->
    <div class="row">

        <div class="col-sm-8">
            <div class="btn-group" role="group">

                <button class="btn btn-default" type="button" @click="dbAddModal">
                    新增
                </button>
                <button class="btn btn-default" type="button">
                    批量导入
                </button>

                <button class="btn btn-default" type="button">
                    修改
                </button>
                <button class="btn btn-default" type="button">
                    删除
                </button>
                <button class="btn btn-primary" type="button">
                    导出
                </button>
            </div>
        </div>
        <div class="col-sm-4  text-right">
            <div class="btn-group" role="group">

                <!--<button class="btn btn-success" type="button" @click="doSearch">-->
                <!--查询-->
                <!--</button>-->
                <!--<button class="btn btn-default" type="button" @click="doClear">-->
                <!--清空-->
                <!--</button>-->

            </div>
        </div>
    </div>
    <!--查询button ends-->

    <div class="row">


        <div class="col-sm-4" style="height: 400px;overflow-y: auto;">
            <ul class="nav nav-list">
                <li class="nav-header">
                    file列表
                </li>

                <template v-for="file in dbFileList">

                    <li>
                        <a href="#" @click="fnShow(file)">{{file}}</a>
                    </li>
                    <li class="divider">
                    </li>
                </template>


            </ul>
        </div>
        <div class="col-sm-8">

            <form role="form">
                <div class="form-group">
                    <label for="">名称</label>
                    <input type="text" class="form-control"  v-model="dbDataForm.fname">
                </div>
                <div class="form-group">
                    <label for="">author</label>
                    <input type="text" class="form-control"  v-model="dbDataForm.author">
                </div>
                <div class="form-group">
                    <label for="">说明</label>
                    <input type="text" class="form-control"  v-model="dbDataForm.desc">
                </div>


                <div class="form-group">
                    <label for="">内容</label>
                    <textarea class="form-control" rows="11" v-model="dbDataForm.fileStr"></textarea>
                </div>

                <button type="submit" class="btn btn-default" @click="dbAdd">提交</button>
            </form>
        </div>

    </div>


    <!--add modal start-->


</div>
</body>
</html>


<script>

    var vm = new Vue({
        el: '#dbApp',
        data: {
            dbSearchForm: {},
            dbDataForm: {
                fname:'',
                author:'',
                desc:'',
                fileStr: '',
            },
            dbFileList: [],


        },
        methods: {


            fnShow: function (fname) {

                var _self = this;

                $.ajax({
                    url: '/file/getSqlFile?fname=' + fname,
//                    data: _self.dbSearchForm,

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            var data = dat.data;

                            _self.dbDataForm.fname = fname;
                            _self.dbDataForm.fileStr = data;

                        }
                    }
                );
            },

            //
            dbAddModal: function () {

                $('#dbAddModal').modal('show');
            },

            dbAdd: function () {

                var _self = this;

                $.ajax({
                    url: '/file/addSql',
                    data: _self.dbDataForm,
                    type: "POST",
                    datType: "JSON",
//                    contentType: "application/json"

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            _self.dbDataForm.author="";
                            _self.dbDataForm.desc="";
                            _self.dbDataForm.fileStr=dat.data;


                        }
                    }
                );

            },


            getDataList: function () {

                var _self = this;

                $.ajax({
                    url: '/file/sqlFileList',
//                    data: _self.dbSearchForm,

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            var data = dat.data;
                            _self.dbFileList = data;

                        }
                    }
                );
            }
        },
        mounted: function () {

            this.getDataList();
        }
    });

</script>